<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .file-box{
            display: block;
            width:300px;
            height: 200px;
            border:1px solid #ccc;
            position: relative;
        }
        .file-box > input[type=file]{
            display: none;
        }
        .file-box > img{
            width:100%;
            height: 100%;
        }
        .file-box > span{
            display: block;
            width:100%;
            height:30px;
            background-color:rgba(0, 0, 0, 0.3);
            position: absolute;
            bottom: 0px;
            left:0px;
            text-align: center;
            line-height: 30px;
        }
        .loading > span{
            display: block;
            width:100%;
            height: 30px;
            position: absolute;
            top:48%;
            left:0px;
            border:1px solid white;
            box-sizing: border-box;
        }
        .loading i{
            display: block;
            height:30px;
            background:lightgreen;
        }
    </style>
</head>
<body>
    <label id="fileBox" class="file-box">
        <input type="file" >
        <img src="/upload/upload.png" alt="">
        <span>图片只支持png、jpeg、jpg格式</span>
        <div class="loading">
            <span>
                <i style="width:0%;"></i>
            </span>
        </div>
    </label>
   <input type="button" value="上传图片" onclick="uploadFile()">
    <script>
        let file=null;
        //获取标签的DOM对象
        let fileBox=document.querySelector("#fileBox");
        let fileDom=document.querySelector("input[type='file']");
        let imgDom=document.querySelector("img");
        let loadingDom=document.querySelector(".loading");
        let iDom=document.querySelector("i");
        let reg=/\.(png|jpg|jpeg)$/;
        fileDom.onchange=function(){
            // console.log(this.files);//获取选择文件数据的集合
            let tempFile=this.files[0];//获取的文件数据对象
            let flag=reg.test(tempFile.name);
            if(flag){
                let url=window.URL.createObjectURL(tempFile);//根据当前文件数据对象去创建一个图片地址
                imgDom.src=url;
                file=tempFile;
            }else{
                alert("不支持该文件的上传");
                file=null;
            }
        };

        function uploadFile(){
            if(file==null){
                alert("请选择上传的文件");
                return;
            }
            let xhr=new XMLHttpRequest();
            
            xhr.open("post","/params/body");
            let fd=new FormData();
            fd.append("pic",file);
            xhr.onload=function(){
                alert("上传图片成功");
            };

            //对上传进度的监控，周期性事件=>按照固定时间进行执行
            xhr.upload.onprogress=function(e){//事件对象
                // console.log(e.loaded);//已经完成上传的数据量
                // console.log(e.total);//总数据量
                let percent=(e.loaded/e.total)*100;
                iDom.style.width=percent+"%";
            };
            xhr.onloadend=function(){
                loadingDom.style.display="none";
                
            };

            xhr.send(fd);

        }
    </script>
</body>
</html>